<template>
    <vBreadcrumbVue></vBreadcrumbVue>
    <div class="bgff_pd16">
        <a-form
            :model="formState"
            v-bind="layout"
            name="nest-messages"
            :validate-messages="validateMessages"
            @finish="onFinish"
        >
            <a-form-item :name="['user', 'title']" label="标题" :required="true">
                <a-input v-model:value="formState.user.title" placeholder="给标题起个名字" />
            </a-form-item>
            <a-form-item :name="['user', 'time']" label="起止日期" :required="true">
                <a-range-picker v-model:value="formState.user.time" class="w100" />
            </a-form-item>
            <a-form-item :name="['user', 'target']" label="目标描述" :required="true">
                <a-textarea v-model:value="formState.user.introduction" placeholder="请输入你的阶段性工作目标" />
            </a-form-item>
            <a-form-item :name="['user', 'standard']" label="衡量标准" :required="true">
                <a-textarea v-model:value="formState.user.standard" placeholder="请输入衡量标准" />
            </a-form-item>
            <a-form-item :name="['user', 'userId']" label="客户（选填）">
                <a-input
                    v-model:value="formState.user.userId"
                    placeholder="请描述你服务的客户,内部客户直接 姓名/工号"
                />
            </a-form-item>
            <a-form-item :name="['user', 'name']" label="邀评人（选填）">
                <a-input v-model:value="formState.user.name" placeholder="请直接 姓名/工号,最多可邀请 5 人" />
            </a-form-item>
            <a-form-item
                :name="['user', 'permissions']"
                label="权重"
                :rules="[{ type: 'number', min: 0, max: 10 }]"
            >
                <a-input-number v-model:value="formState.user.permissions" placeholder="请输入" />
            </a-form-item>
            <a-form-item label="目标公开">
                <a-radio-group v-model:value="formState.user.targetGk" name="radioGroup">
                    <a-radio value="0">公开</a-radio>
                    <a-radio value="1">部分公开</a-radio>
                    <a-radio value="2">不公开</a-radio>
                </a-radio-group>
                <a-select
                    v-model:value="formState.user.options"
                    v-if="formState.user.targetGk == '1'"
                    mode="multiple"
                    class="w100 mt8"
                    placeholder="公开给"
                    :options="[...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))"
                ></a-select>
            </a-form-item>
            <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8, flex: '1' }">
                <a-space :size="10">
                    <a-button type="primary" html-type="submit">提交</a-button>
                    <a-button>保存</a-button>
                </a-space>
            </a-form-item>
        </a-form>
    </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive } from 'vue';
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 8 },
};

const validateMessages = {
    required: '${label} 是必填项',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
        time: '${label} is not a valid number!'
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};

const formState = reactive({
    user: {
        title: '',
        time: [],
        standard: '',
        target: '',
        userId: '',
        name: '',
        website: '',
        permissions: 0,
        targetGk: '0',
        options: [],
        introduction: '',
    },
});
const onFinish = (values: any) => {
    console.log('Success:', values);
};
</script>
<script lang="ts">
export default {
    name: 'basic-form'
}
</script>
<style>
</style>